<template>
  <div class="demo-pagination-block">
    <el-pagination
      background
      v-model:currentPage="currentPageNum"
      v-model:page-size="currentPageSize"
      :page-sizes="props.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";

// 父传子数据
const props = defineProps<{
  total: number;
  pageSize: number[];
  currentPageNum: number;
  currentPageSize: number;
}>();

// 子传父事件
const emit = defineEmits(["changePageSize", "changePageNum"]);

// 分页功能按钮
// 改变一页显示n条时显示
const handleSizeChange = (val: number) => {
  emit("changePageSize", val);
};

// 改变页码时显示
const handleCurrentChange = (val: number) => {
  emit("changePageNum", val);
};
</script>
<style lang="less" scoped>
// 分页插件样式
.demo-pagination-block {
  float: right;
  margin: 15px 0 0 0;
  :deep(.el-input__inner) {
    width: 125px !important;
  }
}
</style>
